<template>
  <div style="display: flex;align-items: center;justify-content: center;width: 100%;height: 100%;">
    <el-card class="box-card" style="display: block;padding: 20px">
      <span>修改密码</span>
      <el-divider style="margin: 20px 0;"/>
      <el-form
          ref="resetPasswordRef"
          :model="resetPasswordForm"
          label-position="left"
          label-width="30%"
          :rules="resetPasswordFormRules"
      >

        <el-form-item label="旧密码" prop="oldPassword">
          <el-input type="password" v-model="resetPasswordForm.oldPassword" style="width: 260px"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input type="password" v-model="resetPasswordForm.newPassword"></el-input>
        </el-form-item>
        <el-form-item label="确认新密码" prop="confirmPassword">
          <el-input type="password" v-model="resetPasswordForm.confirmPassword"></el-input>
        </el-form-item>

        <el-divider style="margin: 20px 0;"/>
        <p style="text-align: center">
          <el-button type="primary" @click="editPasswordHandle">修改密码</el-button>
        </p>

      </el-form>
    </el-card>
  </div>
</template>
<script>
import {Message} from "@element-plus/icons-vue";
import {ElMessage, ElMessageBox} from "element-plus";
import request from "@/utils/request";

export default {
  name: "RestPassword",
  data() {
    return {
      resetPasswordForm: {
        oldPassword: '',
        newPassword: '',
        confirmPassword: ''
      },
      resetPasswordFormRules: {
        oldPassword: [{required: true, message: "请输入原密码", trigger: "blur"}],
        newPassword: [{required: true, message: "请输入新密码", trigger: "blur"}],
        confirmPassword: [{required: true, message: "请确认新密码", trigger: "blur"}],
      }
    }
  },
  methods: {
    editPassword() {
      if (this.resetPasswordForm.newPassword !== this.resetPasswordForm.confirmPassword) {
        ElMessage({
          message: "新密码和确认密码不一致，请检查",
          type: "error"
        })
        return;
      }
      if(this.resetPasswordForm.newPassword === this.resetPasswordForm.oldPassword){
        ElMessage({
          message: "新密码不能和旧密码一致，请检查",
          type: "error"
        })
        return;
      }

      request.put("/editPassword",
          {oldPassword: this.resetPasswordForm.oldPassword, newPassword: this.resetPasswordForm.newPassword}
      ).then(
          res => {
            console.log(res)
            ElMessage({
              message: "修改密码成功！",
              type: "success"
            })
            this.$refs.resetPasswordRef.resetFields()
          },
          err => {
            console.log(err)
          }
      )

    },
    editPasswordHandle(){
      this.$refs.resetPasswordRef.validate(validate=>{
        if(validate){
          ElMessageBox.confirm(
              '确定修改密码吗?',
              '修改密码',
              {
                confirmButtonText: '修改',
                cancelButtonText: '取消',
                type: 'warning',
              }
          )
              .then(() => {
                this.editPassword()
              })
              .catch(() => {

              })
        }
      })
    }


  }
}
</script>